<template>
  <div class="app-container">
    <el-card>
      <!-- 标题 -->
      <div slot="header" class="clearfix">
        <span>学生学业预警处理</span>
      </div>

      <!-- 搜索区 -->
      <div class="search-container">
        <el-form :inline="true" :model="searchForm">
          <el-form-item label="预警类型">
            <el-select v-model="searchForm.warningType" placeholder="请选择">
              <el-option label="全部" value="" />
              <el-option label="学分不足" value="学分不足" />
              <el-option label="成绩不合格" value="成绩不合格" />
              <el-option label="成绩缺失" value="成绩缺失" />
            </el-select>
          </el-form-item>

          <el-form-item label="处理状态">
            <el-select v-model="searchForm.isProcessed" placeholder="请选择">
              <el-option label="全部" value="" />
              <el-option label="已处理" value="true" />
              <el-option label="未处理" value="false" />
            </el-select>
          </el-form-item>

          <el-button type="primary" @click="fetchWarnings">查询</el-button>
        </el-form>
      </div>

      <!-- 表格 -->
      <el-table
        :data="filteredWarnings"
        border
        style="width: 100%"
        :default-sort="{ prop: 'isProcessed', order: 'ascending' }"
      >
        <!-- 基础信息 -->
        <el-table-column prop="studentName" label="学生姓名" align="center" width="120" />

        <el-table-column prop="className" label="所在班级" align="center" width="150" />

        <el-table-column prop="courseName" label="课程名称" align="center" />

        <!-- 预警类型 -->
        <el-table-column label="预警类型" align="center" width="120">
          <template #default="scope">
            <el-tag :type="getWarningTypeTag(scope.row.warningType)">
              {{ scope.row.warningType }}
            </el-tag>
          </template>
        </el-table-column>

        <!-- 成绩详情 -->
        <el-table-column label="成绩详情" align="center" width="200">
          <template #default="scope">
            <div>总成绩：{{ scope.row.score || '暂无' }}</div>
            <div>平时：{{ scope.row.dayScore || '缺失' }} | 期中：{{ scope.row.halfScore || '缺失' }} | 实验：{{ scope.row.experScore || '缺失' }}</div>
          </template>
        </el-table-column>

        <!-- 处理状态 -->
        <el-table-column prop="isProcessed" label="处理状态" align="center" width="120">
          <template #default="scope">
            <el-tag :type="scope.row.isProcessed ? 'success' : 'danger'">
              {{ scope.row.isProcessed ? '已处理' : '未处理' }}
            </el-tag>
          </template>
        </el-table-column>

        <!-- 操作 -->
        <el-table-column label="操作" align="center" width="120">
          <template #default="scope">
            <el-button
              size="mini"
              type="primary"
              :disabled="scope.row.isProcessed"
              @click="handleProcessWarning(scope.row)"
            >
              处理
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getWarnings, markProcessed } from '@/api/teacher'

export default {
  name: 'StudentWarningList',
  data() {
    return {
      // 全量数据
      warnings: [],
      // 过滤条件
      searchForm: {
        warningType: '',
        isProcessed: ''
      },
      loading: false,
      query: {
        teacherId: ''
      }
    }
  },
  computed: {
    // 过滤后的数据
    filteredWarnings() {
      return this.warnings.filter(item => {
        const matchesType = this.searchForm.warningType
          ? item.warningType === this.searchForm.warningType
          : true
        const matchesStatus = this.searchForm.isProcessed
          ? String(item.isProcessed) === this.searchForm.isProcessed
          : true
        return matchesType && matchesStatus
      })
    }
  },
  mounted() {
    this.fetchWarnings()
  },
  methods: {
    // 获取预警数据
    async fetchWarnings() {
      this.loading = true
      try {
        const teacherId = this.$store.state.user.token
        console.log(teacherId)
        this.query.teacherId = teacherId
        console.log(this.query)
        const response = await getWarnings(this.query)
        if (response.success) {
          this.warnings = response.data
        } else {
          this.$message.error(response.message)
        }
      } catch (error) {
        this.$message.error('数据加载失败')
      } finally {
        this.loading = false
      }
    },

    // 处理预警
    async handleProcessWarning(row) {
      try {
        const result = await this.$confirm(
          '确定要标记为已处理吗？',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )

        if (result === 'confirm') {
          const response = await markProcessed(row.studentId, row.courseId)
          if (response.success) {
            this.$message.success('处理成功')
            // eslint-disable-next-line require-atomic-updates
            row.isProcessed = true
          } else {
            this.$message.error(response.message)
          }
        }
      } catch {
        // 取消操作
      }
    },

    // 根据预警类型返回标签颜色
    getWarningTypeTag(type) {
      switch (type) {
        case '学分不足':
          return 'warning'
        case '成绩不合格':
          return 'danger'
        case '成绩缺失':
          return 'info'
        default:
          return ''
      }
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.search-container {
  margin-bottom: 20px;
}

.el-table {
  font-size: 13px;
}

.autocomplete-item {
  padding: 10px;
  cursor: pointer;
  &:hover {
    background-color: #f5f7fa;
  }
}
</style>
